<template>
  <el-container style="height: 100%" v-loading="loading">
    <el-header class="header-drawer nopadding" v-if="!issearch">
      <FormX
        :formList="dataInfo.search"
        v-model="search"
        @search="getSearch"
      ></FormX>
    </el-header>
    <el-main class="container bc-table" style="height: 100%; padding: 0px">
      <TableX
        class="nobc"
        border
        :tableData="dataInfo.tableData"
        :column="dataInfo.culumn"
      ></TableX>
    </el-main>
    <el-footer class="footer mt20">
      <el-pagination
        v-model:current-page="tableField.pageNo"
        v-model:page-size="tableField.pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        prev-text="上一页"
        next-text="下一页"
      />
    </el-footer>
    <SelfDialog
      :dialogVisable="addVisable"
      title="新增数据"
      width="700px"
      @close="confirmAdd(1)"
      @confirm="confirmAdd(2)"
    >
      <template #default>
        <div class="center_content">
          <AddForm
            ref="addFormRef"
            :formList="fildList"
            v-model="addForm"
          ></AddForm>
        </div>
      </template>
    </SelfDialog>
  </el-container>
</template>

<script setup>
import { queryoptions, getdatadetail } from "@/api/sjqd";
import { getsjmlField, addsjmldetailData } from "@/api/sjml";
import { ref, reactive, onMounted } from "vue";
import { Minxfun } from "@/utils/minxin";
const { handleSizeChange, handleCurrentChange, tableField, total, loading } =
  Minxfun();
import TableX from "@/components/table/table.vue";
import FormX from "@/components/form/form.vue";
import SelfDialog from "@/components/dialog/dialog.vue";
import AddForm from "./addForm.vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  issearch: Boolean,
});

const route = useRoute();

let showdrawer = ref(true);

let dataInfo = reactive({
  tableData: [],
  culumn: [],
  search: [],
});

const getSearch = () => {
  if (tableField.value.pageNo == 1) {
    getTableData();
  } else {
    tableField.value.pageNo = 1;
    getTableData();
  }
};

onMounted(() => {
  getTableData();
  getSearchOption();
  getFieldList();
});

let search = reactive({});
const getTableData = async () => {
  try {
    let searchArr = [];
    for (let key in search) {
      if (search[key]) {
        searchArr.push({
          fieldName: key,
          value: search[key],
        });
      }
    }
    loading.value = true;
    let { data } = await getdatadetail({
      objectId: route.query.id,
      queryOptions: searchArr || [],
      ...tableField.value,
      pageNum: tableField.value.pageNo,
    });

    dataInfo.tableData = [];

    if (dataInfo.culumn.length === 0) {
      let ObjecInfo =
        data.objectDataList.length > 0 ? data.objectDataList[0] : {};
      for (let key in ObjecInfo) {
        dataInfo.culumn.push({
          props: key,
          label: key,
        });
      }
    }
    if (data.objectDataList.length > 0) {
      data.objectDataList.forEach((element, index) => {
        let item = element;
        dataInfo.tableData.push(item);
      });
    }

    total.value = Number(data.total) || 0;
    loading.value = false;
  } catch (e) {
    console.error(e);
  }
};

// 查询条件
const getSearchOption = async () => {
  try {
    let { data } = await queryoptions({
      objectId: route.query.id,
    });
    data.forEach((item) => {
      dataInfo.search.push({
        ...item,
        fieldName: item.itemName,
        displayName: item.itemNameChn,
      });
    });
  } catch (e) {
    console.log(e);
  }
};

watch(tableField, (newvla, oldval) => {
  getTableData();
});

// 新增数据
let addForm = reactive({});
let addFormRef = ref();
let addVisable = ref(false);
let fildList = ref([]);

// 获取新增数据
const getFieldList = async () => {
  try {
    let { data } = await getsjmlField({
      objectId: route.query.id,
    });
    fildList.value = data.itemInfos;
  } catch (e) {
    console.error(e);
  }
};

const confirmAdd = async (type) => {
  if (type == 1) {
    changeVisable();
  } else {
    addFormRef.value
      .submitValue()
      .then(async (result) => {
        if (!result) return false;
        let objArr = [];
        fildList.value.forEach((item) => {
          objArr.push({
            dataItemId: item.dataItemId,
            itemName: item.itemName,
            value: addForm[item.itemName],
          });
        });
        let { data } = await addsjmldetailData({
          addData: objArr,
          objectId: route.query.id,
        });
        ElMessage({
          message: "追加成功",
          type: "success",
        });
        getTableData();
        changeVisable();
      })
      .catch((error) => {});
  }
};

// 改变追加数据
const changeVisable = () => {
  addVisable.value = !addVisable.value;
  for (let key in addForm) {
    addForm[key] = "";
  }
};

defineExpose({
  changeVisable,
});
</script>

<style lang="scss">
.self_drawer {
  height: 80% !important;
}
.el-drawer__header {
  padding: 0 40px;
  margin-bottom: 0;
}
.el-drawer__body {
  padding: 0 40px;
  background: #f6f9ff;
}
.el-drawer__footer {
  background: #f6f9ff;
}
.drawer-header {
  width: 100%;
  height: 70px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #2263bf;
    .total {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #666666;
      margin-left: 40px;
    }
  }
  .icon {
    font-size: 20px;
    cursor: pointer;
  }
}
.drawer-footer {
  text-align: right;
  padding: 0 40px;
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    .is-active {
      background: #2263bf !important;
    }
  }
  .el-pager li:hover {
    background: rgba(142, 191, 255, 0.72) !important;
    color: #2263bf !important;
  }

  .btn-prev {
    width: 84px !important;
    position: relative;
    padding-left: 16px;
    &::before {
      content: "<<";
      position: absolute;
      left: 8px;
      top: 0px;
    }
  }
  .btn-next {
    width: 84px !important;
    position: relative;
    padding-right: 16px;
    &::before {
      content: ">>";
      position: absolute;
      right: 8px;
      top: 0;
    }
  }
}

.header-drawer {
  padding-top: 20px;
  box-sizing: border-box;
  height: auto;
}
</style>